<script lang="ts" setup>
import {computed, h, ref} from "vue";
import {
  HomeOutlined,
  LogoutOutlined,
  UserOutlined,
  SmileOutlined,
} from "@ant-design/icons-vue";
import {MenuProps, message} from "ant-design-vue";
import {useRouter} from "vue-router";
import {useLoginUserStore} from "@/stores/user.ts";
import {userLogoutUsingGet} from "@/api/userController.ts";

const current = ref<string[]>(["home"]);
const originItems = ref<MenuProps["items"]>([
  {
    key: "/",
    icon: () => h(HomeOutlined),
    label: "主页",
    title: "主页",
  },
  {
    key: "/about",
    label: "关于",
    title: "关于",
  },
  {
    key: "/addPicture",
    label: "创建图片",
    title: "创建图片",
  },
  {
    key: "/admin/userManager",
    label: "用户管理",
    title: "用户管理",
  },
  {
    key: "/admin/pictureManager",
    label: "图片管理",
    title: "图片管理",
  },
  {
    key: "others",
    label: h(
        "a",
        {href: "https://gitee.com/camellia_codebo", target: "_blank"},
        "你博"
    ),
    title: "codebo",
  },
]);


const router = useRouter();
const loginUserStore = useLoginUserStore();
const doMenuClick = ({key}) => {
  router.push(key);
};

router.afterEach((to) => {
  current.value = [to.path];
});

const filterMenus = (menus = [] as MenuProps['items']) => {
  return menus?.filter((menu) => {
    if (menu?.key?.startsWith("/admin")) {
      if (!loginUserStore.getLoginUser() || loginUserStore.getLoginUser().userRole !== "admin") {
        return false;
      }
    }
    return true;
  });
};
const items = computed(() => filterMenus(originItems.value))

const doLogout = async () => {
  const res = await userLogoutUsingGet();
  if (res.code === 0 && res.data) {
    message.success("退出成功")
    loginUserStore.setLoginUser({
      userName: "未登录"
    });
    await router.push({
      path: "/user/login"
    });
  } else {
    message.error("退出失败")
  }
};
</script>

<template>
  <div id="globalHeader">
    <a-row :wrap="false">
      <!--      logo部分-->
      <a-col flex="200px">
        <router-link to="/">
          <div class="tittle-bar">
            <img src="../assets/logo.png" alt="logo" class="logo"/>
            <div class="tittle">厚米图库</div>
          </div>
        </router-link>
      </a-col>
      <!--      菜单导航栏部分 -->
      <a-col flex="auto">
        <a-menu
            v-model:selectedKeys="current"
            mode="horizontal"
            :items="items"
            @click="doMenuClick"
        />
      </a-col>
      <!--      个人登录交互部分-->
      <a-col flex="120px">
        <div>
          <div v-if="loginUserStore.getLoginUser().id">
            <a-dropdown>
              <a-space>
                <a-avatar
                    :size="50"
                    :src="loginUserStore.getLoginUser().userAvatar"
                />
                {{ loginUserStore.getLoginUser().userName }}
              </a-space>
              <template #overlay>
                <a-menu>
                  <a-menu-item>
                    <UserOutlined/>
                    <a href="javascript:;">个人信息</a>
                  </a-menu-item>
                  <a-menu-item>
                    <SmileOutlined/>
                    <a href="javascript:;">祝你天天开心！~ฅ^•ﻌ•^ฅ</a>
                  </a-menu-item>
                  <a-menu-item @click="doLogout">
                    <LogoutOutlined/>
                    <a href="javascript:;">退出登录</a>
                  </a-menu-item>
                </a-menu>
              </template>
            </a-dropdown>
          </div>
          <a-button v-else type="primary" href="/user/login">登录</a-button>
        </div>
      </a-col>
    </a-row>
  </div>
</template>

<style scoped>
#globalHeader {
  .tittle-bar {
    display: flex;
    align-items: center;

    .logo {
      height: 48px;
    }

    .tittle {
      color: black;
      margin-left: 16px;
    }
  }
}
</style>
